<!doctype html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
    function byId (id) {
      return document.getElementById(id)
    }
    //支持IE10及以上
    if(typeof FileReader == "undified") {
      alert("浏览器不支持！");
    }
    function showDataByURL() {
      var files = byId("fileDemo").files;
      var resultFile = files[0]

      var reader = new FileReader();

      /**
       *
       * @param event 事件进展对象
       */
      reader.onload = function (event) {
        var urlData = this.result;
        console.info(event, this);
        document.getElementById("result").innerHTML += "<img width='100px' height='100px' src='" + urlData + "' alt='" + resultFile.name + "' />";
      };

      reader.readAsDataURL(resultFile);
    }


    function showDataByBinaryString() {
      var resultFile = document.getElementById("fileDemo").files[0];
      if (resultFile) {
        var reader = new FileReader();
        //异步方式
        reader.onload = function(e) {
          var urlData = this.result;
          console.log(urlData)
        };
        reader.readAsBinaryString(resultFile);
      }
    }


    function showDataByText() {
      var resultFile = document.getElementById("fileDemo").files[0];
      if (resultFile) {
        var reader = new FileReader();
        reader.onload = function (e) {
          var urlData = this.result;
          document.getElementById("result").innerHTML += urlData;
        };
        reader.readAsText(resultFile,'gb2312');

      }
    }

    function readFile(){
      var fileList = document.getElementById("fileDemo").files;
      for (var i = 0; i < fileList.length; i++) {
        if (!(/image\/\w+/.test(fileList[i].type))) {
          document.getElementById("result").innerHTML+="<br/><span>type:"+fileList[i].type+"--非图片类型--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span>";
        }
        else {
          document.getElementById("result").innerHTML+="<br/><span>type:"+fileList[i].type+"--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span>";
        }
      }
    }
  </script>
</head>
<body>
<input type="file" onchange="showDataByURL()" name="fileDemo" id="fileDemo" multiple="multiple"/>
<input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
<input type="button" value="readAsBinaryString"  id="readAsBinaryString" onclick="showDataByBinaryString();"/>
<input type="button" value="readAsText"  id="readAsText" onclick="showDataByText();"/>
<input type="button" value="readFile"  id="readFile" onclick="readFile();"/>
<div id="result">

</div>
</body>
</html>
